<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from "mxreality.js/build/three";
import { VR, AVR } from "mxreality.js/build/mxreality";
import * as Hls from "mxreality.js/build/hls";

import panorama from "./assets/panorama.jpg";

window.THREE = THREE; // 重要，不设置则会报未定义错误！！！！！！
window.Hls = Hls;
window.AVR = AVR;

export default {
  data() {
    return {};
  },
  mounted() {
    let scene = new THREE.Scene();
    let renderer = new THREE.WebGLRenderer();
    const el = document.getElementById("container");
    el.appendChild(renderer.domElement);
    let vr = new VR(scene, renderer, el);
    vr.loadProgressManager.onLoad = function () {
      vr.VRObject.getObjectByName("__mxrealityDefault").visible = true;
      // vr.controls.enable = false;
    };
    vr.loadProgressManager.onProgress = function () {
      console.log("onProgress");
    };
    vr.loadProgressManager.onError = function () {
      console.log("onError");
    };
    vr.init(function () {});
    vr.playPanorama(panorama);
  },
};
</script>

<style lang="scss" scoped>
h1 {
  height: 200px;
}
#container {
  width: 100%;
  height: 500px;
}
</style>
